<template>
  <div class="table-classic-wrapper">

    <el-row>
      <!--钱包信息展示-->
      <el-col :span="8">
        <el-card class="card_information" shadow="hover">

          <div v-if="user.identity===0">
            <el-descriptions title="我的钱包" :column="1" border class="card_information_content" labelStyle="width:100px">
              <template slot="extra">
                <el-button type="text" @click="showTopUp=true">充值</el-button>
              </template>

              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-wallet"></i>
                  个人账户
                </template>
                ￥ {{ walletList.balance |numFilter}}
              </el-descriptions-item>

              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-money"></i>
                  积分
                </template>
                {{ walletList.integral }}
              </el-descriptions-item>
            </el-descriptions>
          </div>

          <div v-if="user.identity!==0">
            <el-descriptions title="我的钱包" :column="1" border class="card_information_content" labelStyle="width:100px">

              <el-descriptions-item>
                <template slot="label">
                  <i class="el-icon-wallet"></i>
                  账户
                </template>
                ￥ {{ walletList.balance |numFilter}}
              </el-descriptions-item>
            </el-descriptions>
          </div>


        </el-card>
      </el-col>

      <!--充值信息-->
      <el-col :span="16">

        <el-card class="card_records" shadow="hover">

          <div slot="header">
            <span style="font-size: 20px" v-if="user.identity===0">充值/支付记录</span>
            <span style="font-size: 20px" v-if="user.identity===1">收款记录</span>
            <span style="font-size: 20px" v-if="user.identity===2">收款记录</span>
          </div>

          <div style="height:650px;" class="scrollbar">
            <el-scrollbar style="height:100%">
              <!--放你需要滚动条的内容-->
              <div>
                <el-timeline v-for="i in walletRecords" :key="i">
                  <el-timeline-item :timestamp="format(new Date(i.gmtCreate))" placement="top">
                    <div>
                      <el-card>
                        <p v-if="i.identity===0">充值{{ i.money }}&nbsp;￥</p>
                        <p v-if="i.identity===1">支付{{ i.money | numFilter}}&nbsp;￥</p>
                        <p v-if="i.identity===2">收款{{ i.money | numFilter}} ￥</p>
                      </el-card>
                    </div>
                  </el-timeline-item>
                </el-timeline>
              </div>

              <div style="height: 400px"></div>
            </el-scrollbar>
          </div>

        </el-card>

      </el-col>
    </el-row>


    <!-- 充值框-->
    <el-dialog
        title="钱包充值"
        :visible.sync="showTopUp"
        width="20%"
        :before-close="handleClose">
      <el-form :model="walletList" ref="addForm" label-width="80px" class="demo-ruleForm">

        <el-form-item
            label="充值金额"
            prop="topUpMoney"
            :rules="[{ required: true, message: '充值金额不能为空'},{ type: 'number', message: '充值金额必须为数字值'}]">
          <el-input v-model.number="walletList.topUpMoney" autocomplete="off" style="width: 80%;"></el-input>&nbsp;￥
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submitAddMoney">提 交</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import {getUserInformation} from "@/api/user";
import {getWalletRecordByUserId, insertWalletRecordByUserId} from "@/api/wallet/wallet";
import {getGeneralUserById} from "@/api/general/userGeneral";

export default {
  name: "MyWallet",
  data() {
    return {
      /**
       * 充值页面
       */
      showTopUp: false,

      /**
       * 钱包信息,余额和积分
       */
      walletList: {
        balance: '',
        integral: '',
        topUpMoney: 0,//充值金额，默认为0
      },

      /**
       * 充值信息或支付信息
       */
      walletRecords: [],

      /**
       * 用户
       */
      user: undefined
    }
  },

  created() {
    this.getGeneralUserById();
  },
  filters: {

    numFilter (value) {
      // 截取当前数据到小数点后两位
      return parseFloat(value).toFixed(2)
    }

  },
  methods: {

    /**
     * 获取用户钱包信息
     */
    getWallet() {
      this.walletList.balance = this.user.balance;
      this.walletList.integral = this.user.integral;
    },

    /**
     * 获取充值记录或支付记录
     */
    getWalletList() {
      const formData = new FormData();

      formData.append("userId", this.user.id);

      getWalletRecordByUserId(formData).then(res => {
        this.walletRecords = res.walletRecords;
      }).catch(() => {
        this.$message({
          message: "error",
          type: "error"
        })
      })

    },

    /**
     * 获得用户信息
     */
    getGeneralUserById() {
      const user = eval('(' + getUserInformation() + ')');

      const formData = new FormData();

      formData.append("id", user.id);


      getGeneralUserById(formData).then(res => {
        this.user = res.user;
        this.getWallet();
        this.getWalletList();
      }).catch(() => {
        this.$message.error("用户信息获取失败");
      })
    },

    /**
     *提交充值表单
     */
    submitAddMoney() {
      this.$refs.addForm.validate(valid => {

        const data = {
          userId: this.user.id,
          money: this.walletList.topUpMoney,
        };
        if (valid) {
          if (this.walletList.topUpMoney === 0) {
            this.$message.warning("充值金额应大于0￥");
          } else {
            insertWalletRecordByUserId(data).then(res => {
              if (res.message === 1) {
                this.user = res.user;
                this.walletList.balance = this.user.balance;
                this.walletList.integral = this.user.integral;

                this.getWalletList();
                this.$message.success("充值成功");
              }
            }).catch(() => {
              this.$message({
                message: "error",
                type: "error"
              })
            })

            this.walletList.topUpMoney = 0;
            this.showTopUp = false
          }
        }
      })
    },

    /**
     * 关闭对话框前触发事件
     */
    handleClose() {
      this.walletList.topUpMoney = 0;
      this.showTopUp = false;
    },

    /**
     * 修改充值或支付时间格式
     */
    format(date) {
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      var hour = date.getHours();
      var minute = date.getMinutes();
      var second = date.getSeconds();

      if (month < 10) {
        month = '0' + month;
      }

      if (day < 10) {
        day = '0' + day;
      }

      if (hour < 10) {
        hour = '0' + hour;
      }

      if (minute < 10) {
        minute = '0' + minute;
      }

      if (second < 10) {
        second = '0' + second;
      }

      return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
    },
  }

}
</script>

<style lang="less">
.card_information {
  width:80%;
  margin: 5px 50px;
}

.card_information_content {
  width: 100%;
  margin: 0 auto;
}

.card_records {
  margin-top: 5px;
  margin-right: 30px;
  //width: 100%;
  height: 85vh;
}

.scrollbar .is-horizontal {
  display: none;
}

.scrollbar .el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>
